/**
 * v-debounce
 * 按钮防抖指令
 * 接收参数：function类型
 */
import type { Directive, DirectiveBinding } from 'vue'
interface ElType extends HTMLElement {
  __handleClick__: () => any
}
const debounce: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== 'function') {
      const errorMsg = { message: 'callback 必须是一个函数' }
      throw errorMsg
    }
    let timer: number | null = null
    el.__handleClick__ = function () {
      if (timer) {
        clearInterval(timer)
      }
      timer = window.setTimeout(() => {
        binding.value()
      }, 500)
    }
    el.addEventListener('click', el.__handleClick__)
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener('click', el.__handleClick__)
  },
}

export default debounce
